<template>
  <div class="step">
    <div class="step-l">
      <SettingInput :title="'Name'" v-model="Name" :placeholder="''" :height="50" class="step-item"/>
      <div class="step-item">
        <p class="setting-title">Project Archive</p>
        <div class="flex">
          <span class="setting-subtitle">-- Use File:</span>
          <n-upload>
            <n-button>Choose File</n-button>
          </n-upload>
        </div>
      </div>
      <SettingInput :title="'Entrypoint'" v-model="Entrypoint" :placeholder="''" :height="50" class="step-item"/>
      <SettingInput :title="'DAGDriver'" v-model="DAGDriver" :placeholder="''" :height="50" class="step-item"/>

    </div>
    <div class="step-r">
      <p class="setting-title">Serve Config Preview</p>
      <div class="step-r--preview">

      </div>
    </div>
  </div>
</template>

<script setup>
import { NUpload, NButton } from 'naive-ui'
import {ref} from "vue";
import SettingInput from '@/components/fsConfig/SettingInput'

let Name = ref('')
let Entrypoint = ref('')
let DAGDriver = ref('')
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
}
.step {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.step-l {
  width: 30%;
  margin-right: 6%;
}
.step-r {
  flex: 1;
}
.step-item {
  margin-bottom: 20px;
}
.setting-subtitle {
  width: 150px;
  margin-right: 10px;
}
.setting-title {
  font-size: var(--settingTitleFontSize);
  margin-bottom: 6px;
}
.step-r--preview {
  width: 80%;
  height: 60vh;
  border: 1px solid black;
  margin-top: 10px;
  border-radius: 10px;
}
</style>
